<template>
	<view>
		<view class="serch-view">
			<search-input></search-input>
		</view>
		<view class="equipment-content">
			<view class="equipment-list" v-for="(items, index) in equipmentList" :key="index" @click="showDetail()">
				<view>
					<view class="equipment-name"> {{ index + 1 }}. {{ items.name }}
						<span class="status-items" :class="items.status === 2?'error':''">
							正常
						</span>
					</view>
					<view class="equipment-address"> {{ items.address }} </view>
				</view>
				<view class="list-arrow">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.arrow"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchInput from '@/components/search-input/index.vue';
	export default {
		components: {
			searchInput
		},
		data() {

			return {
				equipmentList: [{
					name: '观音山04号店',
					address: '观音山商务运营中心4号楼0101',
					status: 1
				}, {
					name: '观音山01号店',
					address: '观音山商务运营中心1号楼0101',
					status: 2
				}, {
					name: '观音山04号店',
					address: '观音山商务运营中心4号楼0101',
					status: 1
				}, {
					name: '观音山01号店',
					address: '观音山商务运营中心1号楼0101',
					status: 2
				}],
				icons: {
					arrow: '/static/images/icons/icon_next@3x.png'
				},
			}
		},
		methods: {
			showDetail() {
				const _this = this
				uni.navigateTo({
					url: '/pages/device/detail' + '?' + _this.version
				})
			}
		}
	}
</script>

<style>
	.serch-view {
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.equipment-content {
		padding: 0 30rpx;
	}

	.equipment-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.list-arrow {
		width: 15rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
	}

	.equipment-name {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.equipment-address {
		margin-top: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.status-items {
		margin-left: 10rpx;
		display: inline-block;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid #268DFF;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(38, 141, 255, 1);
		padding: 4rpx 10rpx;
	}

	.error {
		border: 1rpx solid rgba(255, 85, 0, 1);
		color: rgba(255, 85, 0, 1);
	}
</style>
